<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入姓名"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="职务" prop="position">
        <el-input
          v-model="queryParams.position"
          placeholder="请输入职务"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="学历" prop="education">
        <el-select v-model="queryParams.education" placeholder="请选择学历" clearable style="width: 200px">
          <el-option
            v-for="item in educationOptions"
            :key="item.label"
            :label="item.label"
            :value="item.label"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="入职时间" prop="entryTime">
        <el-date-picker
          v-model="queryParams.entryTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          style="width: 240px"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:bpyr:add']"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:bpyr:edit']"
        >修改</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:bpyr:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:bpyr:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['system:bpyr:import']"
        >导入</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="bpyrList" @selection-change="handleSelectionChange" stripe>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="照片" align="center" prop="url" width="80">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.url"
            :src="imgBeforeUrl(scope.row.url)"
            :preview-src-list="[imgBeforeUrl(scope.row.url)]"
            fit="cover"
            style="width: 40px; height: 40px; border-radius: 50%; cursor: pointer;"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <el-avatar v-else icon="el-icon-user" size="small"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" prop="name" min-width="100" />
      <el-table-column label="职务" align="center" prop="position" min-width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.position" type="primary" size="small">
            {{ scope.row.position }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="学历" align="center" prop="education" width="100"></el-table-column>
      <!-- <el-table-column label="入职时间" align="center" prop="entryTime" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.entryTime">{{ parseTime(scope.row.entryTime, '{y}-{m}-{d}') }}</span>
          <span v-else class="text-muted">未设置</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="创建时间" align="center" prop="createTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="备注" align="center" prop="remark" min-width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.remark" class="remark-cell" @click="showRemarkDetail(scope.row.remark)">
            <span class="remark-text">{{ scope.row.remark }}</span>
            <i class="el-icon-view remark-icon"></i>
          </div>
          <span v-else class="text-muted">无</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleView(scope.row)"
          >查看</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:bpyr:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:bpyr:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改人员信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <!-- 头像上传区域 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="头像" prop="url">
              <div class="avatar-upload-container">
                <image-upload v-model="form.url" :limit="1" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 基本信息 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务" prop="position">
              <el-input v-model="form.position" placeholder="请输入职务" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学历" prop="education">
              <el-select v-model="form.education" placeholder="请选择学历" style="width: 100%">
                <el-option
                  v-for="item in educationOptions"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          
        </el-row>
        
        <!-- 备注信息 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input 
                v-model="form.remark" 
                type="textarea" 
                placeholder="请输入备注信息（选填）" 
                :rows="4"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看人员信息对话框 -->
    <el-dialog title="人员信息详情" :visible.sync="viewOpen" width="1000px" append-to-body>
      <el-descriptions :column="2" border :label-style="labelStyle" :contentStyle="contentStyle">
        <el-descriptions-item label="头像" style="width: 200px;">
          <el-image
            v-if="viewForm.url"
            :src="imgBeforeUrl(viewForm.url)"
            :preview-src-list="[imgBeforeUrl(viewForm.url)]"
            fit="cover"
            style="width: 60px; height: 60px; border-radius: 50%;"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <el-avatar v-else icon="el-icon-user" size="medium"></el-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="姓名">{{ viewForm.name || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="职务">
          <el-tag v-if="viewForm.position" type="primary">{{ viewForm.position }}</el-tag>
          <span v-else class="text-muted">未设置</span>
        </el-descriptions-item>
        <el-descriptions-item label="学历">
          <el-tag v-if="viewForm.education" :type="getEducationTagType(viewForm.education)">
            {{ getEducationLabel(viewForm.education) }}
          </el-tag>
          <span v-else class="text-muted">未设置</span>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="入职时间">
          {{ viewForm.entryTime ? parseTime(viewForm.entryTime, '{y}-{m}-{d}') : '未设置' }}
        </el-descriptions-item> -->
        <!-- <el-descriptions-item label="创建时间">
          {{ viewForm.createTime ? parseTime(viewForm.createTime, '{y}-{m}-{d} {h}:{i}') : '未设置' }}
        </el-descriptions-item> -->
        <el-descriptions-item label="备注" :span="2">
          {{ viewForm.remark || '无' }}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 备注详情对话框 -->
    <el-dialog title="备注详情" :visible.sync="remarkDialogVisible" width="500px" append-to-body>
      <div class="remark-detail-content">
        <p>{{ currentRemark }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remarkDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 人员信息导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload 
        ref="upload" 
        :limit="1" 
        accept=".xlsx, .xls" 
        :headers="upload.headers" 
        :action="upload.url" 
        :disabled="upload.isUploading" 
        :on-progress="handleFileUploadProgress" 
        :on-success="handleFileSuccess" 
        :auto-upload="false" 
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upload.open = false">取 消</el-button>
        <el-button type="primary" @click="submitFileForm" :loading="upload.isUploading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listBpyr, getBpyr, delBpyr, addBpyr, updateBpyr, importBpyr, importTemplate } from "@/api/system/bpyr"
import { getToken } from "@/utils/auth"
import { beforeUrl } from "@/utils"

export default {
  name: "Bpyr",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 提交按钮loading
      submitLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 人员表格数据
      bpyrList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 学历选项
      educationOptions: [
        { value: '1', label: '博士' },
        { value: '2', label: '硕士' },
        { value: '3', label: '本科' },
        { value: '4', label: '专科' },
        { value: '5', label: '高中' },
        { value: '6', label: '初中及以下' }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        position: null,
        education: null,
        entryTime: null,
      },
      // 表单参数
      form: {
        education: null,
        entryTime: null,
        createBy: null,
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "名字不能为空", trigger: "blur" },
          { min: 2, max: 20, message: "名字长度必须介于 2 和 20 之间", trigger: "blur" }
        ],
        position: [
          { required: true, message: "职务不能为空", trigger: "change" }
        ],
        education: [
          { required: true, message: "学历不能为空", trigger: "change" }
        ]
      },
      // 上传参数
      upload: {
        // 是否显示弹出层（人员信息导入）
        open: false,
        // 弹出层标题（人员信息导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的人员数据
        updateSupport: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/bpyr/import/bpyr"
      },
      // 查看人员信息对话框
      viewOpen: false,
      // 查看人员信息表单
      viewForm: {},
      labelStyle: {
        color: "#000",
        "font-weight": "500",
        width: "180px",
        "word-break": "keep-all",
      },
      contentStyle: {
        "min-width": "250px",
        "word-break": "break-all",
      },
      // 备注详情对话框
      remarkDialogVisible: false,
      // 当前备注内容
      currentRemark: "",
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询人员列表 */
    getList() {
      this.loading = true
      listBpyr(this.queryParams).then(response => {
        this.bpyrList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 获取学历标签
    getEducationLabel(value) {
      const item = this.educationOptions.find(item => item.value === value)
      return item ? item.label : value
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        url: null,
        position: null,
        education: null,
        entryTime: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加人员信息"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getBpyr(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改人员信息"
      }).catch(() => {
        this.$modal.msgError("获取人员信息失败")
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitLoading = true
          if (this.form.id != null) {
            updateBpyr(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            }).catch(() => {
              this.$modal.msgError("修改失败")
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            addBpyr(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            }).catch(() => {
              this.$modal.msgError("新增失败")
            }).finally(() => {
              this.submitLoading = false
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除人员编号为"' + ids + '"的数据项？').then(function() {
        return delBpyr(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {
        this.$modal.msgError("删除失败")
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/bpyr/export', {
        ...this.queryParams
      }, `被评议人员信息_${new Date().getTime()}.xlsx`)
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "人员信息导入"
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      this.$download.zip('system/bpyr/download/bpyrmb',`被评议人员信息模板_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    // 获取学历标签
    getEducationTagType(value) {
      const item = this.educationOptions.find(item => item.value === value)
      if (item) {
        if (item.value === '1') return 'success'
        if (item.value === '2') return 'info'
        if (item.value === '3') return 'warning'
        if (item.value === '4') return 'danger'
        if (item.value === '5') return 'success'
        if (item.value === '6') return 'info'
      }
      return ''
    },
    // 查看人员信息
    handleView(row) {
      this.viewForm = row
      this.viewOpen = true
    },
    // 刷新按钮操作
    handleRefresh() {
      this.getList()
    },
    imgBeforeUrl(url) {
      return beforeUrl(url)
    },
    // 显示备注详情
    showRemarkDetail(remark) {
      this.currentRemark = remark
      this.remarkDialogVisible = true
    }
  }
}
</script>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 20px;
}

.app-container {
  padding: 20px;
}

.mb8 {
  margin-bottom: 8px;
}

/* 表格样式优化 */
.el-table .el-table__header-wrapper th {
  background-color: #fafafa;
  color: #606266;
  font-weight: 500;
}

/* 头像样式 */
.el-image {
  border: 2px solid #e4e7ed;
  transition: all 0.3s;
}

.el-image:hover {
  border-color: #409eff;
  transform: scale(1.05);
}

/* 标签样式 */
.el-tag {
  margin: 2px;
}

/* 按钮组样式 */
.el-button + .el-button {
  margin-left: 8px;
}

/* 表单样式 */
.el-form-item {
  margin-bottom: 18px;
}

/* 对话框样式 */
.el-dialog__body {
  padding: 20px 30px;
}

/* 搜索表单样式 */
.el-form--inline .el-form-item {
  margin-right: 15px;
  margin-bottom: 18px;
}

/* 分页样式 */
.pagination-container {
  padding: 15px 0;
  text-align: right;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .el-form--inline .el-form-item {
    display: block;
    margin-right: 0;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-button {
    padding: 7px 12px;
    font-size: 12px;
  }
}


.upload-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  text-align: center;
}

/* 表单布局优化 */
.el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.el-input__inner,
.el-textarea__inner {
  border-radius: 4px;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 对话框按钮样式 */
.dialog-footer {
  text-align: right;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.dialog-footer .el-button {
  margin-left: 10px;
}

/* 表单行间距 */
.el-row {
  margin-bottom: 10px;
}

.el-row:last-child {
  margin-bottom: 0;
}

/* 导入对话框样式 */
.el-upload-dragger {
  width: 100%;
  height: 180px;
}

.el-upload__tip {
  line-height: 1.5;
}

.el-checkbox {
  margin-bottom: 10px;
}

/* 导入说明样式 */
.import-instructions {
  margin-bottom: 20px;
}

.import-instructions .el-alert__description p {
  margin: 5px 0;
  font-size: 13px;
  line-height: 1.4;
}

/* 导入结果弹窗样式 */
.el-message-box__message {
  max-height: 60vh;
  overflow-y: auto;
}

/* 头像样式优化 */
.el-image {
  border: 2px solid #e4e7ed;
  transition: all 0.3s;
}

.el-image:hover {
  border-color: #409eff;
  transform: scale(1.05);
}

/* 标签样式优化 */
.el-tag {
  margin: 2px;
  border-radius: 4px;
}

/* 按钮组样式优化 */
.el-button + .el-button {
  margin-left: 8px;
}

/* 表单样式优化 */
.el-form-item {
  margin-bottom: 18px;
}

.el-form-item__label {
  font-weight: 500;
  color: #606266;
}

/* 对话框样式优化 */
.el-dialog__body {
  padding: 20px 30px;
}

.el-dialog__header {
  background-color: #fafafa;
  padding: 20px 30px;
  border-bottom: 1px solid #ebeef5;
}

/* 搜索表单样式优化 */
.el-form--inline .el-form-item {
  margin-right: 15px;
  margin-bottom: 18px;
}

/* 分页样式优化 */
.pagination-container {
  padding: 15px 0;
  text-align: right;
  border-radius: 8px;
  margin-top: 10px;
}

/* 文本样式 */
.text-muted {
  color: #909399;
  font-size: 12px;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .el-form--inline .el-form-item {
    display: block;
    margin-right: 0;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-button {
    padding: 7px 12px;
    font-size: 12px;
  }
  
  .el-dialog {
    width: 90% !important;
    margin: 5vh auto !important;
  }
}

/* 加载状态优化 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.9);
}

/* 卡片样式 */
.app-container {
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
  padding: 20px;
}

/* 操作按钮悬停效果 */
.el-button--text:hover {
  background-color: #f5f7fa;
  border-radius: 4px;
}

/* 表格行悬停效果 */
.el-table__body tr:hover > td {
  background-color: #f5f7fa !important;
}

/* 统计卡片样式 */
.stat-card {
  border-radius: 8px;
  transition: all 0.3s;
  border: none;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 24px;
}

.stat-icon.total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.high-edu {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.recent {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.manager {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  line-height: 1;
}

/* 备注单元格样式 */
.remark-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
  max-width: 100%;
}

.remark-cell:hover {
  background-color: #f5f7fa;
}

.remark-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #606266;
  font-size: 13px;
  line-height: 1.4;
}

.remark-icon {
  color: #409eff;
  font-size: 14px;
  margin-left: 8px;
  flex-shrink: 0;
}

.remark-cell:hover .remark-icon {
  color: #66b1ff;
}

/* 备注详情对话框样式 */
.remark-detail-content {
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.remark-detail-content p {
  margin: 0;
  line-height: 1.6;
  color: #606266;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>
